<template>
  <div class="pie-chart-group">
    <swiper :slideList="data">
      <template #slide="{item}">
        <div class="box">
          <div class="title-wrap">
            <span class="title">{{item.label}}</span>
            <el-tooltip :content="item.describe">
              <i class="el-icon-warning-outline"></i>
            </el-tooltip>
          </div>
          <gauge-chart class="chart" :data="item"/>
        </div>
      </template>
    </swiper>
  </div>
</template>

<script type="text/javascript">
import Swiper from '@/components/Swiper/index.vue'
import GaugeChart from './GaugeChart.vue'
export default {
  name: 'PieChartGroup',
  components: {
    Swiper,
    GaugeChart
  },
  props: {
    data: {
      type: Array,
      required: true
    }
  },
  data () {
    return {
      currentPage: 1,
      pageSize: 5,
      totalPage: 0
    }
  },
  methods: {
    init () {
      this.currentPage = 1
      this.totalPage = Math.ceil(this.data.length / this.pageSize)
    }
  },
  watch: {
    data: {
      handler () {
        this.init()
      },
      immediate: true
    }
  }
}
</script>

<style lang="scss" scoped>
.pie-chart-group {
  padding: 10px;
  .box {
    .title-wrap {
      color: #666;
      font-size: 18px;
      text-align: center;
      .title {
        margin-right: 10px;
      }
    }
    .chart {
      width: 120px;
      height: 120px;
      margin: 10px auto 0;
    }
  }
}
</style>
